<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        .container{
            background-color: aqua;
        }
        /*清除浮动*/
        .clearfix:before,
        .clearfix:after {
            content: " ";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <h1>文本未浮动</h1>
        <p>
            # This file contains the mappings of IP addresses to host names. Each
            # entry should be kept on an individual line. The IP address should
            # be placed in the first column followed by the corresponding host name.
            # The IP address and the host name should be separated by at least one
            # space.
            #
            # Additionally, comments (such as these) may be inserted on individual
            # lines or following the machine name denoted by a '#' symbol.
        </p>
        <h1 style="float: left;">文本浮动</h1>
        <p style="float: left;">
            # This file contains the mappings of IP addresses to host names. Each
            # entry should be kept on an individual line. The IP address should
            # be placed in the first column followed by the corresponding host name.
            # The IP address and the host name should be separated by at least one
            # space.
            #
            # Additionally, comments (such as these) may be inserted on individual
            # lines or following the machine name denoted by a '#' symbol.
        </p>
    </div>
</body>
</html>